<template>
<el-container>
  <el-header>    <AdminHeader /></el-header>
  <el-container>
    <el-aside> <AdminAside /></el-aside>
    <el-main>
      <!-- 注册表单 -->
      <div class="addNews">
        <el-card shadow="never" class="box-card">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-form-item label="标题:" prop="title">
              <el-input
                type="title"
                v-model="ruleForm.title"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="来源:" prop="source">
              <el-input
                type="source"
                v-model="ruleForm.source"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="digest:" prop="digest">
              <el-input
                type="digest"
                v-model="ruleForm.digest"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="内容1:" prop="content">
              <el-input
                type="content"
                v-model="ruleForm.content"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- 内容1的图片 -->
            <el-upload
              ref="uploadRef"
              class="upload-demo"
              :http-request="uploadFile"
              :file-list="fileList"
              :auto-upload="false"
              :limit="1"
              action="#"
            >
              <template slot="trigger">
                <el-button type="primary" plain>选择内容1的图片</el-button>
              </template>
              <el-button class="ml-3" type="primary" @click="submitUpload"
                >发布
              </el-button>
            </el-upload>
          </el-form>
        </el-card>
      </div>
    </el-main>
  </el-container>
</el-container>

 
</template>

<script>
import AdminAside from '@/components/AdminAside.vue';
import AdminHeader from '@/components/AdminHeader.vue';
export default {
  components: {
     
    AdminAside,
    AdminHeader
 
  },
  data() {
    var validateTitle = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("标题不能为空"));
      } else {
        callback();
      }
    };
    var validateSource = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("来源不能为空"));
      } else {
        callback();
      }
    };
    var validateDigest = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("digest不能为空"));
      } else {
        callback();
      }
    };
    var validateContent = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("内容1不能为空"));
      } else {
        callback();
      }
    };
    return {
      text: "",
      fileList: [],
      // 表单数据
      ruleForm: {
        title: "",
        source: "",
        digest: "",
        content: "",
        uid: 10,
        category_id:533,
      },
      rules: {
        title: [{ validator: validateTitle, trigger: "blur" }],
        source: [{ validator: validateSource, trigger: "blur" }],
        digest: [{ validator: validateDigest, trigger: "blur" }],
        content: [{ validator: validateContent, trigger: "blur" }],
      },
    };
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // // 上传文件
    uploadFile(params) {
      let formdata = new FormData();
      formdata.append("news_img",params.file);
      formdata.append("uid", this.ruleForm.uid);
      formdata.append("title", this.ruleForm.title);
      formdata.append("source", this.ruleForm.source);
      formdata.append("digest", this.ruleForm.digest);
      formdata.append("content", this.ruleForm.content);
      formdata.append("category_id",this.ruleForm.category_id);
       

      this.axios({
        url: `http://localhost:3000/aManger/postNews`,
        method: "POST",
        data: formdata,
        headers: {
          "content-Type": "multipart/form-data",
        },
      })
        .then((res) => {
          // console.log(res.data);
          // alert('头像上传成功')
        })
        .catch((err) => {
          console.error(err);
          alert("头像上传失败");
        });
    },
    // // 点击上传
    submitUpload() {
      // 触发上传 调用配置 :http-request="uploadFile"
      // 即触发 uploadFile函数
      // uploadRef.submit(); // 上传完成后执行的操作 ...
      this.$refs.uploadRef.submit();
      this.$refs.uploadRef.clearFiles();
    },
  },
};
</script>

<style scoped>
/* .addNews {
  width: 1000px;
  height: 600px;
  margin: 100px auto;
  background: #fff url("../assets/regist.gif") no-repeat;
} */
/* .box-card {
  margin: 0 auto;
  border: 0;
  width: 800px;
  height: 800px;
  background-color: #fff;
  color: #000;
}

.el-form-item label {
  color: #000;
  padding: 0;
}


body > .el-container {
  margin-bottom: 40px;
} */

.el-header {
  padding: 0;
 } 

.el-aside {
  color: #000000;
  text-align: center;
  height: 880px;
} 
</style>